<template>
	<div class="design">
    <el-image :src="Image"></el-image>
		<div class="hero">
			<el-image :src="ImageApprove"></el-image>
		</div>
		<el-card class="design-item">
		  <h2 class="item-header" slot="header">为什么要来好好住认证</h2>
      <div>
        <el-image :src="ImageB1"></el-image>
        <el-image :src="ImageB2"></el-image>
      </div>
    </el-card>
    <el-card class="design-item">
		  <h2 class="item-header" slot="header">认证以后有什么好处</h2>
      <el-image :src="ImageB3"></el-image>
    </el-card>
	</div>
</template>
<script lang="ts" setup>
import Image from '@/assets/design.png'
import ImageApprove from '@/assets/design-1.png'
import ImageB1 from '@/assets/design-2.png'
import ImageB2 from '@/assets/design-3.png'
import ImageB3 from '@/assets/design-4.png'
</script>
<style scoped>
h2{
  text-align: center;
  font-size: 32px;
  font-weight: normal;
}
.design-item{
  border: 0;
  box-shadow: none;
}
.item-header::before,
.item-header::after{
  height: 60px;
  display: block;
  content: " ";
}
</style>